<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="https://static.91haoka.cn/vant.css"/>
        <script src="https://static.91haoka.cn/vue.min.js"></script>
        <script src="https://static.91haoka.cn/vantall.js"></script>
        <script src="https://static.91haoka.cn/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css"/>
     </head>
    <style type="text/css">
		*{ box-sizing: border-box; font-family:'PingFang SC'; font-size: 12px;}
		img{ max-width: 100%;}
		.kflexbc{ display: flex; justify-content: space-between; align-items: center; }
		.kflexc{ display: flex; align-items: center; }
		.kflexcc{ display: flex; align-items: center; justify-content: center;}
		.kflex{ display: flex; }
		.li{color: rgb(102, 102, 102); font-size: 15px; font-weight: bold; margin-right: 0.3rem; }
		.liact{ font-size: 20px; color: rgb(30, 30, 30); font-weight: bold; background: url('http://test91.91haoka.cn/1715304099tw650481.jpg') no-repeat center;}
    </style>
	<body>
        <div id="app" style="background: #FFFFFF;" v-cloak>
           
             <div style="position: relative;">
               <img :src="ruleForm.adv_img" style="width: 100%;">
               <div class="kflexbc" style="background: rgb(255, 255, 255,0.8); border-radius: 0.2rem 0.2rem 0 0; position: absolute; bottom: 0.2rem; left: 0.15rem; width: 3.45rem; padding:0.1rem 0.15rem; box-sizing: border-box;">
                 <div class="kflexc">
                   <div style="margin-right: 0.1rem;"><img src="./img/dianpu.png" style="width:0.2rem"></div>
                   <div style="font-size: 14px;" class="kflexc">{{ruleForm.name}}</div>
                 </div>
                 <div class="kflexc" v-if="ruleForm.score_display"><img src="http://test91.91haoka.cn/1715235354poo50481.jpg" style="width: 1.9rem;"></div>
               </div>
             </div>
			 
			 <div style="position: fixed; bottom: 2.7rem; right: -12px; z-index: 999;" v-if="ruleForm.kf_display" @click="gokefu()">
			   <img src="./img/kefu.png" style="width: 1.2rem;">
			 </div>
			 
			 <div style="padding:0.2rem 0.15rem; position: relative; border-radius: 0.15rem 0.15rem 0 0; top: -0.2rem; overflow: hidden; background: #fff;" >
				 <div class="kflexbc">
					 <img src="./img/i1.png" style="width: 1rem;" @click="gochaxun">
					 <img src="./img/i2.png" style="width: 1rem;" @click="go3">
					 <img src="./img/i3.png" style="width: 1rem;" @click="go2('fenxiangdianpu.html')">
				 </div>
				 <div class="kflexc" style="padding: 25px 0 30px;">
					 <div @click="changes(1)" :class="act == 1?'liact':''"  class="li">全部</div>
					 <div @click="changes(2)" :class="act == 2?'liact':''"  class="li">移动</div>
					 <div @click="changes(3)" :class="act == 3?'liact':''"  class="li">电信</div>
					 <div @click="changes(4)" :class="act == 4?'liact':''"  class="li">联通</div>
					 <div @click="changes(5)" :class="act == 5?'liact':''"  class="li">广电</div>
				 </div>
				 <div v-for="item in list" :key="item.id" style=" margin-bottom: 0.3rem;">
					<div class="kflex">
						<div class="kflexcc" style="width: 1rem; height: 1rem;  margin-right: 0.1rem; background: #eaeaea;  position: relative; border-radius: 10px;" >
							<div style="position: absolute; left: -2px; top: -2px;" v-if="item.is_main"><img src="https://test91.91haoka.cn/1715563123I5u50481.jpg" style="width:0.33rem"></div>
							<img :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="border-radius: 10px;">
						</div>
						<div style="width: 2.2rem;">
							<div style="font-size: 15px; font-weight: bold; color: rgb(50, 50, 50); max-height: 0.44rem; overflow: hidden; line-height: 0.22rem;">{{item.title}}</div>
							
							<div style="color: #BF8059; font-size: 11px; line-height: 0.2rem;">{{item.points}}</div>
							
							<div class="kflexbc">
								<div style="flex: 1;   line-height: 0.18rem;">
									<div style="color: rgb(51, 51, 51); font-size: 16px; font-weight: bold;" v-if="item.liuliang"><span style=" font-weight: bold;font-size: 16px;">{{item.liuliang}}</span>G</div>
									<div style="color: rgb(51, 51, 51); font-size: 16px; font-weight: bold;" v-if="!item.liuliang">--</div>
									<div style="color: rgb(153, 153, 153); font-size: 12px;">通用流量</div>
								</div>
								<div style="flex: 1;  line-height: 0.18rem;">
									<div style="color: rgb(51, 51, 51); font-size: 16px; font-weight: bold;" v-if="item.dx_liuliang"><span style=" font-weight: bold;font-size: 16px;">{{item.dx_liuliang}}</span>G</div>
									<div style="color: rgb(51, 51, 51); font-size: 16px; font-weight: bold;" v-if="!item.dx_liuliang">--</div>
									<div style="color: rgb(153, 153, 153); font-size: 12px;">定向流量</div>
								</div>
								<div style="flex: 1;  line-height: 0.18rem;">
									<div style="color: rgb(51, 51, 51); font-size: 16px; font-weight: bold;" v-if="item.yuyin"><span style=" font-size: 16px;">{{item.yuyin}}</span>分</div>
									<div style="color: rgb(51, 51, 51); font-size: 16px; font-weight: bold;" v-if="!item.yuyin">--</div>
									<div style="color: rgb(153, 153, 153); font-size: 12px;">通话时长</div>
								</div>
							</div>
						</div>
					</div>
					<div class="kflexc" style="padding: 0.1rem 0;">
						<div v-for="item2 in item.selling_point" v-if="item2 != ''" :key="item2.id" style="padding: 0.04rem 0.1rem; color: rgb(179, 100, 52); border-radius: 4px; background: rgb(255, 238, 223); margin-right: 0.05rem;">
						{{item2}}
						</div>
					</div>
					<div class="kflexc">
						<div class="kflexc" @click="go(item)" style="border-radius: 0.2rem; color: rgb(255, 6, 57); font-weight: bold; padding: 0rem 0.2rem; height: 0.3rem; background: rgb(255, 232, 232); margin-right: 0.1rem; font-size: 14px; ">
							分享<img src="./img/fenxiang.png" style="margin-left:0.1rem; width: 0.16rem;">
						</div>
						<div class="kflexcc" @click="go4(item)" style="flex-grow: 1; font-size: 14px;  font-weight: bold; padding: 0rem 0; height: 0.3rem; border-radius: 0.2rem; box-shadow: 0px 2px 10px 0px rgba(205, 22, 75, 0.44); background: rgb(255, 6, 57); color: rgb(255, 255, 255); text-align: center;">立即办理</div>
					</div>
				 </div>
			 </div>
        </div>

       
        <script>
            var h = document.documentElement.clientWidth / 3.75 + 'px';
                document.documentElement.style.fontSize = h;

            
            new Vue({
                el: '#app',
                data: function() {
                	return {
						act:1,
						ruleForm:{
							// "id": 1,
							// "shop_id": 50481,
							// "name": "测试11",
							// "score_display": 1,
							// "adv_img": "http://test91.91haoka.cn/1715234093XSj50481.jpg",
							// "kf_display": 1,
							// "order_word": "恭喜你下单成功了",
							// "order_qrcode": "http://test91.91haoka.cn/17152437194VM50481.jpg",
							// "qrcode_description": "扫二维码吧！",
							// "order_kf_contact_way": "客服：15553523723",
							// "share_template": "1",
							// "share_img": "http://test91.91haoka.cn/1715234093XSj50481.jpg",
							// "share_qrcode": "",
							// "share_content": "444444",
							// "share_content_color": "#4F36B3",
							// "kf_phone_display": 1,
							// "kf_phone": "15553523723",
							// "kf_phone_remark": "打我电话",
							// "online_kf_display": 1,
							// "kf_qrcode": "http://test91.91haoka.cn/1715246025eTm50481.jpg",
							// "online_kf_work_time": "10:00-11:00",
							// "online_kf_remark": "备注时间",
							// "problem_display": 1,
							// "problem": [
							// 	{
							// 		"title": "阿萨德",
							// 		"content": "123123123"
							// 	},
							// 	{
							// 		"title": "阿萨德",
							// 		"content": "123123123"
							// 	}
							// ],
							// "created_at": "2024-05-08 16:55:20",
							// "updated_at": "2024-05-09 17:14:03"
						},
						list:[],
						url:"",
						apis:"/apis"
                	}
                },
                created(){
					
					if(location.host != 'localhost'){
						this.apis = ""
					}
					axios.get(this.apis +'/api/plan-market/order-page/web/mini-store/info?shop_id='+this.getUrlParam('shop_id'))
						.then(response => {
							if (response.data.msg.code == 0) {
								this.ruleForm = response.data.data
								this.url = response.data.data.url
								document.title = this.ruleForm.name
							} else {
								vant.Toast(response.data.msg.info);
							}
						})
					this.getlist()	
					
                },
                mounted () {
                   
                },
                methods:{
					changes:function(val){
						this.act = val 
						this.getlist()
					},
					getlist:function(){
						
						axios.get(this.apis +'/api/plan-market/web/mini-store/pages?shop_id='+this.getUrlParam('shop_id'))
							.then(response => {
								if (response.data.msg.code == 0) {
									this.list = []
									response.data.data.forEach((item,index)=>{
										if(item.selling_point){
											item.selling_point = JSON.parse(item.selling_point)
										}else{
											item.selling_point = []
										}
										
										if(this.act == 1){
											this.list.push(item)
										}
										if(this.act == 2){
											if(item.operator == '10086'){
												this.list.push(item)
											}
										}
										if(this.act == 3){
											if(item.operator == '10000'){
												this.list.push(item)
											}
										}
										if(this.act == 4){
											if(item.operator == '10010'){
												this.list.push(item)
											}
										}
										if(this.act == 5){
											if(item.operator == '10099'){
												this.list.push(item)
											}
										}
										
									})
									console.log(this.list)
								} else {
									vant.Toast(response.data.msg.info);
								}
							})
					},
					getUrlParam:function(name) {
					    var query = window.location.search.substring(1);
					    var vars = query.split("&");
					    for (var i=0;i<vars.length;i++) {
					            var pair = vars[i].split("=");
					            if(pair[0] == name){return pair[1];}
					    }
					    return(false);
					},
					
					go:function(item){
						if(item.share_img || item.image1){
							window.location.href = location.origin + '/webapp/weixiaodian/fenxiang.html?id='+item.id+'&shop_id='+this.getUrlParam('shop_id')
						}else{
							vant.Toast('请先上传分享图');
						}
						
					},
					go2:function(url){
						window.location.href = location.origin + '/webapp/weixiaodian/fenxiangdianpu.html?shop_id='+this.getUrlParam('shop_id')
					},
					go3:function(){
						window.location.href = this.url
					},
					go4:function(item){
						if(item.take_number > 0){
							window.location.href = location.origin + '/webapp/gantanhaoluodi/index.html?share_id='+this.getUrlParam('shop_id')+'&id='+item.id+'&weixiaodian=true'
						}else{
							window.location.href = location.origin + '/webapp/merchant/templet1.html?share_id='+this.getUrlParam('shop_id')+'&id='+item.id+'&weixiaodian=true'
						}
						
					},
					gokefu:function(){
						window.location.href = location.origin + '/webapp/weixiaodian/kefu.html?shop_id='+this.getUrlParam('shop_id')
					},
					gochaxun:function(){
						window.location.href = "http://duotest.weibu.vip/h5/query"
					}
                }
            });

  
        </script>
	</body>
</html>
